<!DOCTYPE html>
<html lang="en" class="page-fill" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
	<link rel="stylesheet" th:href="@{/lib/layui/css/layui.css}" media="all" />
<style>
.box {
	width: 100px;
	height: 100px;
	border: 2px solid #858585;
}

.img {
	width: 100px;
	height: 100px;
}

.pox {
	width: 70px;
	height: 24px;
}
</style>
</head>
<body>

<input type="hidden" name="flag" th:value="${sysStaffEnclose!=null?sysStaffEnclose.staffId:'' }"/>
	<div class="layui-container" style="margin-top: 20px">
	<form class="layui-form" lay-filter="empForm" id = "empData"
		enctype="multipart/form-data">
		<div class="layui-form-item">
			<div class="layui-inline" lay-filter="selectNet">
				<label class="layui-form-label">所属网点</label>
				<div class="layui-inline">
					<select name="affiliatedNetworkId" lay-verify="required"  >
						<option>请选择网点</option>
						<option th:each="network:${dNetworks}" th:value="${network.networkId}" th:text="${network.networkName}" th:selected="${sysStaffEnclose!=null? (sysStaffEnclose.sysStaff!=null? sysStaffEnclose.sysStaff.affiliatedNetworkId:'') :'' == network.networkId }"></option>

					</select>
				</div>
			</div>
			<div class="layui-inline">
				<label class="layui-form-label">员工编号</label>
				<div class="layui-input-inline">
					<input type="text" name="staffId" th:value="${sysStaffEnclose!=null?sysStaffEnclose.staffId:'' }" th:readonly="${sysStaffEnclose!= ''}? 'readonly':'false'" lay-verify="required"
						autocomplete="off" class="layui-input">
				</div>
			</div>
		</div>


		<div class="layui-form-item">
			<div class="layui-inline">
				<label class="layui-form-label">手机</label>
				<div class="layui-input-inline">
					<input type="tel" name="cellphone" th:value="${sysStaffEnclose!=null?sysStaffEnclose.cellphone:'' }" lay-verify="required"
						autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-inline">
				<label class="layui-form-label">电话</label>
				<div class="layui-input-inline">
					<input type="text" name="telephone" th:value="${sysStaffEnclose!=null?sysStaffEnclose.telephone:'' }" lay-verify="required"
						autocomplete="off" class="layui-input">
				</div>
			</div>
		</div>

		<div class="layui-form-item">
			<div class="layui-inline">
				<label class="layui-form-label">姓名</label>
				<div class="layui-input-inline">
					<input type="text" name="name" th:value="${sysStaffEnclose!=null ? (sysStaffEnclose.sysStaff !=null ? sysStaffEnclose.sysStaff.name :'') :'' }" lay-verify="required"
						autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-inline" lay-filter="selectRole">
				<label class="layui-form-label">岗位</label>
				<div class="layui-inline">
					<select name="roleId"  lay-verify="required">
						<option value="">请选择岗位</option>
						<option th:each="role:${roleList}" th:value="${role.id}" th:text="${role.roleName}" th:selected="${sysStaffEnclose !=null? sysStaffEnclose.roleId :'' == role.id }"></option>
					</select>
				</div>

			</div>
		</div>
		<div class="layui-form-item">
			<div class="layui-inline">
				<label class="layui-form-label">地址</label>
				<div class="layui-input-inline">
					<input type="text" name="homeaddress" th:value="${sysStaffEnclose!=null?sysStaffEnclose.homeaddress:'' }" lay-verify="required"
						autocomplete="off" class="layui-input">
				</div>
			</div>

		</div>
		<div class="layui-form-item">
			<div class="layui-inline">
				<label class="layui-form-label">身份证号</label>
				<div class="layui-input-inline">
					<input type="text" name="idcard" th:value="${sysStaffEnclose!=null?sysStaffEnclose.idcard:'' }" lay-verify="required"
						autocomplete="off" class="layui-input">
				</div>
			</div>

		</div>

		<div class="layui-form-item">
			<div class="layui-upload">
				<div class="layui-inline" style="margin-right:200px;margin-left:100px">
					<img id="imgshow1" class="img" th:src="@{${sysStaffEnclose!=null?sysStaffEnclose.frontidphoto:'' }}" alt="" />
					<div class="pox">
						<button type="button" class="layui-btn" id="img1">
							<i class="layui-icon">&#xe67c;</i>身份证正面
						</button>
					</div>
				</div>

				<div class="layui-inline">
					<img id="imgshow2" class="img" value="" th:src="@{${sysStaffEnclose!=null?sysStaffEnclose.backidphoto:'' }}" alt="" />
					<div class="pox">
						<button type="button" class="layui-btn" id="img2">
							<i class="layui-icon">&#xe67c;</i>身份证反面
						</button>
					</div>
				</div>
			</div>
		</div>
			<div>&nbsp</div>
			<div>&nbsp</div>
			
		<div class="layui-form-item">
			<div class="layui-input-block">
				<button class="layui-btn" id="submit" lay-submit
					lay-filter="empForm">立即提交</button>
				<button type="reset" class="layui-btn layui-btn-primary">重置</button>
			</div>
		</div>
		<input type="hidden" name="frontidphoto"th:value="${sysStaffEnclose!=null?sysStaffEnclose.frontidphoto:'' }">
		 <input type="hidden"name="backidphoto" th:value="${sysStaffEnclose!=null?sysStaffEnclose.backidphoto:'' }">
	</form>
</div>
</body>
<script type="text/javascript"  th:src="@{/lib/layui/layui.js}"></script>
<script th:inline="none">

layui.use(['form','upload','layer','jquery'], function(){
   form = layui.form;
  var upload = layui.upload;
  form.render('select','test1');
  $ = layui.jquery;
	var edit = $("[name='flag']").val();
	if (edit == "" || edit == null || edit == undefined) {
		$("[name='staffId']").removeAttr("readonly");
	}
  //文件上传渲染

	//身份证正面图片的上传
	var uploadInst = upload.render({
		elem: '#img1' //绑定元素
		,url: '/api/emp/fileUpload/' //上传接口
		,done: function(res){
			//上传完毕回调
			$('#imgshow1').attr("src",res.data.src);
			$("input[name ='frontidphoto']").val(res.data.src);

		}
		,error: function(){
			//请求异常回调
		}
	});

	//身份证反面图片的上传
	var uploadInst = upload.render({
		elem: '#img2' //绑定元素
		,url: '/api/emp/fileUpload/' //上传接口
		,done: function(res){
			//上传完毕回调

			$('#imgshow2').attr("src",res.data.src);
			$("input[name ='backidphoto']").val(res.data.src);
		}
		,error: function(){
			//请求异常回调
		}
	});


			//监听提交
			form.on('submit(empForm)', function(obj) {
				var sysStaffEnclose = obj.field;
				console.log(sysStaffEnclose)
				var method = "";
				var index = top.layer.msg('数据提交中，请稍候', {
					icon : 16,
					time : false,
					shade : 0.8
				});
				if (edit == "" || edit == null || edit == undefined) {
					method = "add";
				} else {
					method = "update";
				}

				$.post("/api/emp/"+method,sysStaffEnclose,function(data){
					if (data.code == 200) {
						top.layer.close(index);
						top.layer.msg("员工添加成功！");
						layer.closeAll("iframe");
						//刷新父页面
						parent.location.reload();
					} else {
						layer.msg(data.msg,{"icon":2});
					}

				})
				
				return false;
			});
   
});
</script>


</html>